<template>
  <div class="Con">
    <div class="Con-C">
      <table cellpadding="1px">
        <tr>
          <td><p>请选择要调课程的课室:</p></td>
          <td>
            <el-select
              v-model="room"
              placeholder="请选择课室"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in Room"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td>
        </tr>

        <tr>
          <td><p>要调课程的课程名字:</p></td>
          <td>
            <el-input
              v-model="c_name"
              placeholder="请输入课程名字"
              style="width: 100%"
            ></el-input>
          </td>
        </tr>

        <tr>
          <td><p>要调课程老师的名字:</p></td>
          <td>
            <el-input
              v-model="c_teacher"
              placeholder="请输入课程名字"
              style="width: 100%"
            >
            </el-input>
          </td>
        </tr>

        <tr>
          <td><p>要调课程的课程日期:</p></td>
          <td>
            <el-date-picker
              value-format="yyyy-M-d"
              format="yyyy-M-d"
              v-model="c_date"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            >
            </el-date-picker>
          </td>
        </tr>

        <tr>
          <td><p>要调课程的时间段:</p></td>
          <td>
            <el-select
              v-model="c_time"
              placeholder="请选择时间段"
              style="width: 100%"
            >
              <el-option value="08:40:00">第一，二节课</el-option>
              <el-option value="10:25:00">第三，四节课</el-option>
              <el-option value="14:15:00">第五，六节课</el-option>
              <el-option value="15:55:00">第七，八节课</el-option>
              <el-option value="18:15:00">第九，十节课</el-option>
              <el-option value="20:00:00">第十一，十二节课</el-option>
            </el-select>
          </td>
        </tr>
        <hr />
        <tr>
          <td><p>新的课室:</p></td>
          <td>
            <el-select
              v-model="newroom"
              placeholder="请选择新课室"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in Room"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td>
        </tr>

        <tr>
          <td><p>新的日期:</p></td>
          <td>
            <el-date-picker
              value-format="yyyy-M-d"
              format="yyyy-M-d"
              v-model="newdate"
              type="date"
              placeholder="选择新日期"
              style="width: 100%"
            >
            </el-date-picker>
          </td>
        </tr>

        <tr>
          <td><p>新的时间段:</p></td>
          <td>
            <el-select
              v-model="newtime"
              placeholder="请选择新时间段"
              style="width: 100%"
            >
              <el-option value="08:40:00">第一，二节课</el-option>
              <el-option value="10:25:00">第三，四节课</el-option>
              <el-option value="14:15:00">第五，六节课</el-option>
              <el-option value="15:55:00">第七，八节课</el-option>
              <el-option value="18:15:00">第九，十节课</el-option>
              <el-option value="20:00:00">第十一，十二节课</el-option>
            </el-select>
          </td>
        </tr>

        <tr>
          <td><p>新调的课程是在该学期的第几周:</p></td>
          <td>
            <el-select
              v-model="week"
              placeholder="请选择周数"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in Week"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </td>
        </tr>

        <tr>
          <td colspan="2" style="text-align: right">
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="ReBut()"
              >重写</el-button
            >
            <el-button
              type="success"
              icon="el-icon-s-promotion"
              @click="SubmitBut()"
              >确认</el-button
            >
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import { axios1 } from "@/network";
export default {
  data() {
    return {
      Room: [102, 203, 301, 304, 401, 403, 404, 501, 503, 504],
      Week: [
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
        21, 22, 23,
      ],
      room: "", //旧的课室
      c_name: "", //旧课程名字
      c_teacher: "", //老师姓名
      c_date: "", //日期
      c_time: "", //时间
      newroom: "", //新课室
      newdate: "", //新日期
      newtime: "", //新时间
      week: "",
    };
  },

  methods: {
    ReBut() {
      //重写按钮

      location.reload();
    },

    SubmitBut() {
      if (
        this.room == "" ||
        this.c_name == "" ||
        this.c_teacher == "" ||
        this.c_date == "" ||
        this.c_time == "" ||
        this.newroom == "" ||
        this.newdate == "" ||
        this.newtime == "" ||
        this.week == ""
      ) {
        alert("选项不可以为空！！");
      } else {
        axios1({
          url: "/course/changeCourseTime",
          method: "post",
          headers: {
            token: this.$store.state.token,
          },
          data: {
            room: this.room,
            c_name: this.c_name,
            c_teacher: this.c_teacher,
            c_date: this.c_date,
            c_time: this.c_time,
            newroom: this.newroom,
            newdate: this.newdate,
            newtime: this.newtime,
            week: this.week,
          },
        })
          .then((res) => {
            console.log(res);
            alert(res.data.msg);
          })
          .catch((res) => {
            alert("请求错误！！" + res);
            console.log(res);
          });
      }
    },
  },
};
</script>

<style scoped>
div {
  box-sizing: border-box;
}
.Con {
  width: 90%;
  height: 90%;
  margin: auto;
  margin-top: 3%;
  box-shadow: 1px 1px 10px rgb(104, 104, 104);
  background-color: aliceblue;
  overflow: auto;
}
.Con:hover {
  box-shadow: 1px 1px 10px rgb(56, 56, 56);
}
.Con-C {
  width: 60%;
  height: 90%;
  margin: auto;
  margin-left: 10%;
}
.Con-C table {
  width: 100%;
  height: 100%;
}
.Con-C table tr {
  height: 10%;
}
.Con-C p {
  text-align: right;
  margin-right: 10px;
  font-size: 17px;
  font-weight: 600;
  color: rgb(53, 52, 52);
}
</style>
